<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <van-nav-bar title="黑马头条" fixed />
    <!-- 导入注册并使用一个ARticleINfo组件 -->
    <!-- 在使用组件的时候如果绑定某个属性是小驼峰，建议改成为连字符格式，列如：cmtCount建议写成：cmt——count -->
    <van-pull-refresh v-model="sx" :disabled="finished" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ArticleInfo
          v-for="item in artlist"
          :key="item.id"
          :title="item.title"
          :author="item.aut_name"
          :cmtCount="item.comm_count"
          :time="item.pubdate"
          :cover="item.cover"
        ></ArticleInfo>
      </van-list>
    </van-pull-refresh>
    <!-- <p>{{ artlist.length }}</p> -->
  </div>
</template>

<script>
//导入request.js
// import request from "@/utils/request.js";
import { getArticleListAPI } from "@/api/articleApi";
//导入ArticleInfo组件
import ArticleInfo from "@/components/Article/ArticleInfo.vue";

export default {
  name: "Home",
  data() {
    return {
      //页码值
      page: 1,
      //每一页展示多少条数据
      limit: 10,
      //文章的数组
      artlist: [],
      //是否加载下一页数据，如果loading为true，则不会反复触发load事件
      // 每当下一页数据请求回来的时候把loading改为false
      loading: true,
      // 所有数据是否加载完毕
      finished: false,
      //是否进行下拉刷新
      sx: false,
    };
  },

  //注册组件
  components: {
    ArticleInfo,
  },

  created() {
    this.initArticleList();
    // getArticleListAPI();
  },
  //封装获取文章数据的方法
  methods: {
    //发起get请求获取文章的列表数据
    async initArticleList(isRefrech) {
      const { data: res } = await getArticleListAPI(this.page, this.limit);

      if (isRefrech) {
        //下拉刷新，新数据在前，旧数据在后
        this.artlist = [...res, ...this.artlist];
        // this.sx = true;
        this.isLoading = false;
      } else {
        //如果是上拉加载更多，那某是
        // this.artlist = [旧数据,新数据];
        this.artlist = [...this.artlist, ...res];
        this.loading = false;

        if (res.length === 0) {
          //证明没有下一页数据，直接把finshed改为true，表示数据加载完了
          this.finished = true;
        }
      }
    },

    //只要onload被调用，就应该请求下一页数据
    onLoad() {
      console.log("触发了onload事件");
      //1. 让页码值加1
      this.page++;
      //2 重新请求接口渲染数据
      this.initArticleList(false);
    },
    //下拉刷新的处理函数
    onRefresh() {
      console.log("进行下拉了刷新");
      // 页码值加一
      this.page++;
      //重新请求接口获取数据
      this.sx = false;
      this.initArticleList(true);
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px 0;
}
.van-nav-bar {
  background-color: rgb(0, 123, 255);
}

/deep/ .van-nav-bar__title {
  color: white;
}
</style>
